import React, { Fragment } from "react";
import { Button, Descriptions, Tag } from "antd";
import { actionType } from "@/utils/format";
import { ModalForm, ProField } from "@ant-design/pro-components";
import { getAttachment } from "../props/service";
import { useModel } from "@umijs/max";

export default ({ comments, taskName, form = true }) => {

    const { initialState } = useModel('@@initialState');
    const { users } = initialState;

    return <ModalForm
        modalProps={{ destroyOnClose: true }}
        submitter={{ render: false }}
        title={`${taskName}-审批意见`}
        trigger={<Button type="text" style={{ color: '#ff7a45' }}>审批意见</Button>}>
        <div style={{ maxHeight: '600px', overflow: 'auto', scrollbarWidth: 'thin' }}>
            <Descriptions bordered size="small" style={{ width: '100%' }} column={2}>
                {
                    comments.map((item: any) => {
                        const action = actionType.find(i => i.value == item.flowCommentType);
                        let commentContent = item.commentContent, filename;
                        if (item.attachmentId) {
                            const content = JSON.parse(commentContent);
                            filename = content.filename;
                            commentContent = content.message;
                        }
                        const formData = (action.value == '0' || action.value == '14') && form;
                        let formDataObject;
                        if (formData && item.ext) {
                            formDataObject = JSON.parse(item.ext).content;
                        }
                        return <Fragment key={'comments_' + item.commentId}>
                            <Descriptions.Item label="操作类型">
                                <Tag color={action.color}>{`${action.label}${formData ? '-附表单' : ''}`}</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="操作人">{item.assigneeName}</Descriptions.Item>
                            <Descriptions.Item label="操作时间">{item.commentTime}</Descriptions.Item>
                            <Descriptions.Item label="变量信息">{JSON.stringify(item.variables || {})}</Descriptions.Item>
                            { action.value == '6' && <Descriptions.Item label="委派人">
                                <ProField mode='read' text={item.userId} valueType="select" request={async () => users}/>
                            </Descriptions.Item> }
                            { action.value == '7' && <Descriptions.Item label="转办人">
                                <ProField mode='read' text={item.userId} valueType="select" request={async () => users}/>
                            </Descriptions.Item> }
                            { formData && formDataObject.map((i, index) => <Fragment key={"formObject_" + Math.random() + index}>
                                { i.oldValue && <Descriptions.Item label={`${i.name}(变更前)`}>
                                    {i.isUrl ? <a href={i.oldValue}>{i.oldValue}</a> : <span>{i.oldValue}</span>}
                                </Descriptions.Item> }
                                <Descriptions.Item label={`${i.name}${i.oldValue ? "(变更后)" : ""}`}>
                                    {i.isUrl ? <a href={i.newValue}>{i.newValue}</a> :
                                        <span style={{ color: i.oldValue ? '#ffc069' : '#91caff' }}>{i.newValue}</span>}
                                </Descriptions.Item>
                            </Fragment>) }
                            <Descriptions.Item span={3} label="意见">{commentContent}</Descriptions.Item>
                            {filename && <Descriptions.Item span={3} label="附件">
                                <a target={'_blank'} href={getAttachment(item.attachmentId)}>{filename}</a>
                            </Descriptions.Item>}
                        </Fragment>
                    })
                }
            </Descriptions>
        </div>
    </ModalForm>

}